<template>
  <div class="content-box">
    <e-heading class="titleDistance">比赛设置</e-heading>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
    <el-row>
      <el-col :span="14">
         <el-form-item label="比赛日期"  
          prop="startTime"
          :rules="[
              { required: true, message: '请选择时间'},
          ]">           
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            :picker-options="pickerOptions0"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="场地:" prop="place">
          <el-input id="addressSearch" v-model="form.place" class="address-input" placeholder="请在地图上选取" name="place"></el-input>      
        </el-form-item>
        <el-form-item label="场地编号:" prop="placeNum">
          <el-input v-model="form.placeNum" placeholder="请输入场地编号" class="address-input"></el-input>
        </el-form-item>
      </el-col>
        <el-col :span="10">
            <el-amap-search-box class="search-box" 
                :search-option="searchOption"
                :on-search-result="onSearchResult"></el-amap-search-box>
            <el-amap :vid="'amap-vue'"
                  :map-manager="amapManager"
                  :center="center"
                  :zoom="zoom"
                  :plugin="plugin"
                  :events="events">
            </el-amap>
        </el-col>
    </el-row>


            <e-heading class="titleDistance">对战双方设置</e-heading>
            <el-row>
              <el-col :span="3" class="field-label">
                <p>对战双方：</p>
              </el-col>
              <el-col :span="20" :offset="1">
                <el-row class="versus">
                  <el-col :span="11" class="team-select field-label">
                    <el-select v-model="form.hostUserId"  placeholder="请选择"                                 
                      @change="hostIdChange(form.hostUserId)">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
                  </el-col>
                  <el-col class="line center vs" :span="2" >VS</el-col>
                  <el-col :span="11" class="team-select">
                    <el-select v-model="form.guestUserId"  placeholder="请选择" :disabled="true">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>


          <div v-if="isGroupGame" class="player-set">
            <el-row>
              <el-col class="field-label" :span="3"> 
                <p v-for="(item,index) in gameList" :key="item.name"   class="mb20 bold">第{{index+1| NumbToChinese}}场{{item.name}}：</p>
              </el-col>
              <el-col :span="20" :offset="1" class="field-label">
                <el-row class="relative">
                  <el-col :span="11"
                    v-bind:class="{
                      mr2:!changed,
                      fr: changed
                    }"> 
                    <div v-for="(item,index) in gameList" :key="item.name" class="mb20">
                      <!--单打-->
                      <el-select v-if="item.name.includes('单')" class="full-width" v-model="gameList[index].hostUserId1">
                         <el-option v-for="op in (item.name.includes('男')? hostMemberMan: hostMemberWoman)" :key="op.label"
                          :label="op.label"
                          :value="op.value">
                         </el-option>
                      </el-select>
                      <!--双打-->
                      <template v-else>
                        <el-row>
                          <template v-if="item.name=='混双'">
                            <el-col :span="11">
                              <el-select v-model="gameList[index].hostUserId1">
                                <el-option v-for="op in hostMemberMan" :key="op.label"
                                  :label="op.label"
                                  :value="op.value">
                                </el-option>
                              </el-select> 
                            </el-col>
                            <el-col :span="11" :offset="1">
                              <el-select v-model="gameList[index].hostUserId2">
                                <el-option v-for="op in hostMemberWoman" :key="op.label"
                                  :label="op.label"
                                  :value="op.value">
                                </el-option>
                              </el-select> 
                            </el-col>
                          </template>
                          <template v-else>
                            <el-col :span="11">
                              <el-select v-model="gameList[index].hostUserId1">
                                <el-option v-for="op in (item.name.includes('男')? hostMemberMan: hostMemberWoman)" :key="op.label"
                                  :label="op.label"
                                  :value="op.value">
                                </el-option>
                              </el-select> 
                            </el-col>
                            <el-col :span="11" :offset="1">
                              <el-select v-model="gameList[index].hostUserId2">
                                <el-option v-for="op in (item.name.includes('男')? hostMemberMan: hostMemberWoman)" :key="op.label"
                                  :label="op.label"
                                  :value="op.value">
                                </el-option>
                              </el-select> 
                            </el-col>
                          </template>
                        </el-row>
                      </template>                      
                    </div>
                  </el-col>

                  <el-col :span="2" class="center" style="position:absolute;left:45.83333%;">
                    <div class="mb20 center" v-for="it in match.hostTeamSequenceVO" :key="it.id">VS</div>                  
                  </el-col>
                  
                  <el-col  :span="11"
                    v-bind:class="{
                      mr2:changed,
                      fr: !changed
                    }">
                    <!--单打-->
                    <div class="mb20" v-for="(item,index) in gameList" :key="item.name">
                      <el-select v-if="item.name.includes('单')" class="full-width" 
                        v-model="gameList[index].guestUserId1"> 
                        <el-option v-for="op in (item.name.includes('男')? guestMemberMan: guestMemberWoman)" :key="op.label"
                          :label="op.label"
                          :value="op.value">
                        </el-option>                     
                      </el-select>
                      <template v-else>
                        <el-row>
                          <template v-if="item.name=='混双'">
                            <el-col :span="11">
                              <el-select v-model="gameList[index].guestUserId1">
                                <el-option v-for="op in guestMemberMan" :key="op.label"
                                  :label="op.label"
                                  :value="op.value">
                                </el-option>
                              </el-select> 
                            </el-col>
                            <el-col :span="11" :offset="1">
                              <el-select v-model="gameList[index].guestUserId2">
                                <el-option v-for="op in guestMemberWoman" :key="op.label"
                                  :label="op.label"
                                  :value="op.value">
                                </el-option>
                              </el-select> 
                            </el-col>
                          </template>
                          <template v-else>
                            <el-col :span="11">
                              <el-select v-model="gameList[index].guestUserId1">
                                <el-option v-for="op in (item.name.includes('男')? guestMemberMan: guestMemberWoman)" :key="op.label"
                                  :label="op.label"
                                  :value="op.value">
                                </el-option>
                              </el-select> 
                            </el-col>
                            <el-col :span="11" :offset="1">
                              <el-select v-model="gameList[index].guestUserId2">
                                <el-option v-for="op in (item.name.includes('男')? guestMemberMan: guestMemberWoman)" :key="op.label"
                                  :label="op.label"
                                  :value="op.value">
                                </el-option>
                              </el-select> 
                            </el-col>
                          </template>
                        </el-row>
                      </template>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>


            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <el-row :gutter="20" class="host">
                    <el-col :span="4">
                      <div class="grid-content bg-purple ">主队球衣代表色：</div>
                    </el-col>
                    <el-col :span="20">
                      <div class="grid-content bg-purple">
                        <el-row ref="host">
                          <el-col :span="4" v-model="form.host" v-for="(item,$index) in hostClothList"
                              :key="item.color">
                            <div class="border team-content"
                              v-bind:class="{active:item.selected,disabled:guestIndex==$index}"
                              @click="selectHostCloth(item,$index)">
                              <img v-bind:src="item.imgUrl" alt="" width="53" height="63">
                              <div class="color-info">{{item.color}}</div>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20" class="guest">
                    <el-col :span="4">
                        <div class="grid-content bg-purple ">客队球衣代表色：</div>
                    </el-col>
                    <el-col :span="20">
                        <div class="grid-content bg-purple">
                          <el-row>
                            <el-col :span="4" v-model="form.guest"
                                v-for="(item,$index) in guestClothList" :key="item.color">
                              <div class="border team-content"
                                  v-bind:class="{active:item.selected,disabled:hostIndex==$index }"
                                  @click="selectGuestCloth(item,$index)">
                                <img v-bind:src="item.imgUrl" alt="" width="53" height="63">
                                <div class="color-info">{{item.color}}</div>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>


            <e-heading class="titleDistance">设置工作人员</e-heading>
            <el-row :gutter="20">
                <el-col :span="4" class="lbl">
                    <label>工作人员：</label>
                </el-col>
                <el-col :span="16">
                    <div class="grid-content bg-purple ">
                        <el-row :gutter="20" class="addposition" v-for="(item,index) in form.workers" :key="item.workPost">
                            <el-col :span="4">
                                <div class="grid-content bg-purple position">{{item.workPost}}</div>
                            </el-col>
                            <el-col :span="16">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="" prop="mainReferee">
                                        <el-input v-model="item.workName" placeholder="请输入姓名"></el-input>
                                        <el-button class="btn-icon" v-if="index > defaultWorkers-1" icon="minus" @click="deleteWork(index)">
                                         </el-button>
                                    </el-form-item>                                    
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="addposition">
                <el-col :span="4">
                </el-col>
                <el-col :span="16" class="add-area">
                    <el-col :span="8">
                        <el-form-item label="" prop="position">
                            <el-input class="add-person" v-model="form.position" placeholder="请输入职位"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="" prop="positionName">
                            <el-input class="add-person" v-model="form.positionName" placeholder="请输入姓名"></el-input>
                        </el-form-item>                        
                    </el-col>
                    <el-col :span="2">
                        <el-button class="btn-icon" icon="plus" @click="addPosition()" :disabled="form.workers.length>=10 "></el-button>
                    </el-col>
                </el-col>
            </el-row>
            <div class="divider"></div>
            <div class="button-box">
                <el-button @click="$router.go(-1)">返回</el-button>
                <el-button type="primary" @click="submitForm('form')">确定</el-button>
            </div>
        </el-form>
    </div>

</template>

<script>
  import Api from 'api/race'
  import { mapGetters } from 'vuex'
  // import {cloneObj} from 'utils'
  import VueAMap,{ AMapManager } from 'vue-amap' // eslint-disable-line
  let amapManager = new AMapManager()
  export default {
    computed: {
      hostIndex () {
        return this.hostClothList.indexOf(this.form.host)
      },
      guestIndex () {
        return this.guestClothList.indexOf(this.form.guest)
      },
      ...mapGetters({
        race_detail: 'race_detail'
      }),
      isLeague () { // 是积分联赛双循环
        return this.race_detail.matchFormatStr.includes('积分')
      },
      isKnockout () { // 淘汰赛
        return ['淘汰制1场', '淘汰赛1场'].indexOf(this.race_detail.matchFormatStr) > -1
      },
      isCup () { // 杯赛
        return this.race_detail.matchFormatStr.includes('杯赛')
      },
      isGroupGame () { // 网羽乒团体赛
        return [300301, 300401, 300501].indexOf(this.race_detail.matchType) > -1
      }
    },
    mounted () {
      this.getGameDetail()
    },
    watch: {
    },
    data () {
      return {
        changed: true,
        pickerOptions0: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
        defaultWorkers: 0,
        isActive: false,
        positionName: '',
        hostClothList: [
          {
            color: '蓝色',
            imgUrl: '/static/images/images/medit/blue.jpg',
            value: 5007,
            selected: false
          },
          {
            color: '绿色',
            imgUrl: '/static/images/images/medit/green.jpg',
            value: 5003,
            selected: false
          },
          {
            color: '红色',
            imgUrl: '/static/images/images/medit/red.jpg',
            value: 5002,
            selected: false
          },
          {
            color: '橙色',
            imgUrl: '/static/images/images/medit/orange.jpg',
            value: 5005,
            selected: false
          },
          {
            color: '白色',
            imgUrl: '/static/images/images/medit/white.jpg',
            value: 5001,
            selected: false
          },
          {
            color: '黑色',
            imgUrl: '/static/images/images/medit/black.png',
            value: 5006,
            selected: false
          }
        ],
        guestClothList: [
          {
            color: '蓝色',
            imgUrl: '/static/images/images/medit/blue.jpg',
            value: 5007,
            selected: false
          },
          {
            color: '绿色',
            imgUrl: '/static/images/images/medit/green.jpg',
            value: 5003,
            selected: false
          },
          {
            color: '红色',
            imgUrl: '/static/images/images/medit/red.jpg',
            value: 5002,
            selected: false
          },
          {
            color: '橙色',
            imgUrl: '/static/images/images/medit/orange.jpg',
            value: 5005,
            selected: false
          },
          {
            color: '白色',
            imgUrl: '/static/images/images/medit/white.jpg',
            value: 5001,
            selected: false
          },
          {
            color: '黑色',
            imgUrl: '/static/images/images/medit/black.png',
            value: 5006,
            selected: false
          }
        ],
        form: {
          guestColor: '',
          guestUserId: '',
          hostColor: '',
          hostUserId: '',
          latitude: '',
          longitude: '',
          matchScheduleId: 0,
          place: '',
          placeNum: '',
          startTime: '',
          host: {},
          guest: {},
          workers: [],
          positionName: '',
          position: ''
        },
        rules: {
          place: [
            {required: true, message: '请在地图上选择', trigger: 'change'}
          ],
          placeNum: [
            {required: true, message: '请输入场地编号', trigger: 'change'}
          ]
          /*
          hostUserId: [
            {required: true, message: '请选择主队', trigger: 'change'}
          ],
          guestUserId: [
            {required: true, message: '请选择客队', trigger: 'change'}
          ]
          */
        },
        options: [],
        geocoder: {},
        amapManager: amapManager,
        zoom: 15,
        events: {
          'moveend': () => {
          },
          'zoomchange': () => {
          },
          'click': (e) => {
            var self = this
            let { lng, lat } = e.lnglat
            this.lng = lng
            this.lat = lat
            // 这里通过高德 SDK 完成。
            var geocoder = new AMap.Geocoder({ // eslint-disable-line
              radius: 1000,
              extensions: 'all'
            })
            geocoder.getAddress([lng, lat], function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                if (result && result.regeocode) {
                  // console.log(result.regeocode.formattedAddress)
                  self.form.place = result.regeocode.formattedAddress
                }
              }
            })
          }
        },
        address: '',
        searchOption: {
          city: '深圳',
          citylimit: false
        },
        markers: [],
        center: [121.59996, 31.197646],
        lng: 0,
        lat: 0,
        loaded: false,
        plugin: ['ToolBar', {
          pName: 'Geolocation',
          events: {
            init (o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  this.lng = result.position.lng
                  this.lat = result.position.lat
                  this.center = [this.lng, this.lat]
                  this.loaded = true
                }
              })
            }
          },
          click: (e) => {
            let {lng, lat} = e.lnglat
            this.lng = lng
            this.lat = lat
            // 这里通过高德 SDK 完成。
            let geocoder = new AMap.Geocoder({ // eslint-disable-line
              radius: 1000,
              extensions: 'all'
            })
            geocoder.getAddress([lng, lat], function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                if (result && result.regeocode) {
                  this.form.place = result.regeocode.formattedAddress
                }
              }
            })
          }
        }],
        match: {},
        hostMemberMan: [],
        hostMemberWoman: [],
        guestMemberMan: [],
        guestMemberWoman: [],
        gameList: []
      }
    },
    methods: {
      // 获取工作人员
      getWorker () {
        Api.getWorker({
          matchSport: this.race_detail.matchType
        }, this).then((res) => {
          if (!this.form.workers.length) {
            for (var i = 0, len = res.data.length; i < len; i++) {
              this.form.workers.push({
                workPost: res.data[i],
                workName: ''
              })
            }
          }
          this.defaultWorkers = res.data.length
        })
      },
      selectHostCloth (item, index) {
        if (index === this.guestIndex) {
          return
        }
        this.hostClothList.forEach(function (it) {
          it.selected = false
        })
        item.selected = true
        this.form.host = item
      },
      selectGuestCloth (item, index) {
        if (index === this.hostIndex) {
          return
        }
        this.guestClothList.forEach(function (it) {
          it.selected = false
        })
        item.selected = true
        this.form.guest = item
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('确定修改?', '提示', {
              type: 'warning'
            }).then(() => {
              let hostSeq = []
              let guestSeq = []
              if (this.isGroupGame) {
                if (this.changed) { // 互换位置
                  this.gameList.forEach((item, index) => {
                    hostSeq.push({
                      id: this.match.guestTeamSequenceVO[index].id,
                      member1UserId: this.gameList[index].guestUserId1,
                      member2UserId: this.gameList[index].guestUserId2 || ''
                    })
                    guestSeq.push({
                      id: this.match.hostTeamSequenceVO[index].id,
                      member1UserId: this.gameList[index].hostUserId1,
                      member2UserId: this.gameList[index].hostUserId2 || ''
                    })
                  })
                } else {
                  this.gameList.forEach((item, index) => {
                    hostSeq.push({
                      id: this.match.hostTeamSequenceVO[index].id,
                      member1UserId: this.gameList[index].hostUserId1,
                      member2UserId: this.gameList[index].hostUserId2 || ''
                    })
                    guestSeq.push({
                      id: this.match.guestTeamSequenceVO[index].id,
                      member1UserId: this.gameList[index].guestUserId1,
                      member2UserId: this.gameList[index].guestUserId2 || ''
                    })
                  })
                }
              }
              Api.matchEdit({
                guestColor: this.form.guest ? this.form.guest.color : this.form.guestColor,
                guestUserId: this.form.guestUserId || '',
                hostColor: this.form.host ? this.form.host.color : this.form.hostColor,
                hostUserId: this.form.hostUserId || '',
                latitude: this.form.latitude,
                longitude: this.form.longitude,
                matchScheduleId: this.$route.query.gameId,
                place: this.form.place,
                placeNum: this.form.placeNum,
                startTime: Date.parse(new Date(this.form.startTime)),
                workers: this.form.workers,
                hostTeamSequences: hostSeq,
                guestTeamSequences: guestSeq
              }, {context: this}).then((res) => {
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                })
                let toUrl = ''
                if (this.isLeague) {
                  toUrl = '/race/detail/manage/edit'
                } else if (this.isCup) {
                  toUrl = '/race/detail/manage/scheduleCup'
                } else {
                  toUrl = '/race/detail/manage/schedulecheck'
                }
                this.$router.push({
                  path: toUrl,
                  query: {
                    id: this.$route.query.id,
                    isRun: this.$route.query.isRun,
                    tasktype: this.$route.query.tasktype
                  }
                })
              }).catch((err) => {
                console.log(err.msg)
              })
            }).catch((error) => {
              console.log(error)
              return false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      onSearchResult (pois) {
        let latSum = 0
        let lngSum = 0
        if (pois.length > 0) {
          pois.forEach(poi => {
            let {lng, lat} = poi
            lngSum += lng
            latSum += lat
            this.markers.push([poi.lng, poi.lat])
          })
          let center = {
            lng: lngSum / pois.length,
            lat: latSum / pois.length
          }
          this.center = [center.lng, center.lat]
        }
      },
      addPosition () {
        if (this.form.workers.length >= 10) {
          return
        }
        if (this.form.position && this.form.positionName) {
          this.form.workers.push({
            workPost: this.form.position,
            workName: this.form.positionName
          })
          this.form.position = ''
          this.form.positionName = ''
        }
      },
      deleteWork (i) {
        this.form.workers.splice(i, 1)
      },
      // 设置初始数据
      setData () {
        var match = this.match
        this.form.place = match.place
        this.form.placeNum = match.placeNumber
        this.form.startTime = new Date(match.startTime).format('yyyy-MM-dd hh:mm')
        if (!match.hostColor) {
          this.form.hostClothList[0].selected = true
        }
        if (!match.guestColor) {
          this.form.guestClothList[1].selected = true
        }
      },
      setOptions () {
        this.form.host = this.hostClothList.find(item => {
          return item.selected
        })
        this.form.guest = this.guestClothList.find(item => {
          return item.selected
        })
        let m = this.match
        this.options.push({
          label: m.hostUserName2 ? `${m.hostUserName} & ${m.hostUserName2}` : m.hostUserName,
          value: m.hostUserId
        })
        this.options.push({
          label: m.guestUserName2 ? `${m.guestUserName} & ${m.guestUserName2}` : m.guestUserName,
          value: m.guestUserId
        })
      },
      hostIdChange (val) {
        let match = this.match
        if (val === match.hostUserId) {
          this.form.guestUserId = this.match.guestUserId || ''
          this.changed = !this.changed
        } else {
          this.form.guestUserId = this.match.hostUserId || ''
          this.changed = !this.changed
        }
      },
      // 获取单场比赛的详情
      getGameDetail () {
        Api.getGameDetail({matchScheduleId: this.$route.query.gameId}).then((res) => {
          if (res.data) {
            this.match = res.data
            this.setGroupSet(res.data)
            this.form = Object.assign({
              placeNum: res.data.placeNumber,
              host: {
                color: res.data.hostColor
              },
              guest: {
                color: res.data.guestColor
              }
            }, res.data)
            this.form.hostUserId = res.data.hostUserId ? res.data.hostUserId : res.data.hostUserNameUserId
            this.form.guestUserId = res.data.guestUserId ? res.data.guestUserId : res.data.guestUserNameUserId
            this.form.placeNum = res.data.placeNumber
            this.hostClothList.forEach(item => {
              if (item.color === res.data.hostColor) {
                this.form.host = item
                item.selected = true
              }
            })
            this.guestClothList.forEach(item => {
              if (item.color === res.data.guestColor) {
                this.form.guest = item
                item.selected = true
              }
            })
            if (res.data.workers.length) {
              this.form.workers = res.data.workers.map(item => {
                return {
                  workPost: item.workPost,
                  workName: item.workName
                }
              })
              this.getWorker()
            } else {
              this.getWorker()
            }
            this.setOptions()
          } else {
            this.getWorker()
            this.setData()
            this.setOptions()
          }
        })
      },
      setGroupSet (data) {
        if (!this.race_detail) {
          setTimeout(() => {
            this.setGroupSet(data)
          }, 200)
          return false
        }
        data.guestMembers.length && data.guestMembers.forEach(item => {
          if (item.sex === 1) {
            this.guestMemberMan.push({
              label: item.commingName,
              value: item.userId
            })
          } else {
            this.guestMemberWoman.push({
              label: item.commingName,
              value: item.userId
            })
          }
        })
        data.hostMembers.length && data.hostMembers.forEach(item => {
          if (item.sex === 1) {
            this.hostMemberMan.push({
              label: item.commingName,
              value: item.userId
            })
          } else {
            this.hostMemberWoman.push({
              label: item.commingName,
              value: item.userId
            })
          }
        })
        let list = this.match.hostTeamSequenceVO
        this.gameList = []
        list.length && list.forEach(item => {
          if (item.roundTypeName.includes('单')) {
            this.gameList.push({
              name: item.roundTypeName,
              hostUserId1: '',
              guestUserId1: ''
            })
          } else {
            this.gameList.push({
              name: item.roundTypeName,
              hostUserId1: '',
              hostUserId2: '',
              guestUserId1: '',
              guestUserId2: ''
            })
          }
        })
        // 设置场序球员对战
        for (let i = 0, len = this.gameList.length; i < len; i++) {
          let hostVO = data.hostTeamSequenceVO
          let guestVO = data.guestTeamSequenceVO
          if (hostVO) {
            if (hostVO[i].member1Info) {
              this.gameList[i].hostUserId1 = hostVO[i].member1UserId
            }
            if (hostVO[i].member2Info) {
              this.gameList[i].hostUserId2 = hostVO[i].member2UserId
            }
          }
          if (guestVO) {
            if (guestVO[i].member1Info) {
              this.gameList[i].guestUserId1 = guestVO[i].member1UserId
            }
            if (guestVO[i].member2Info) {
              this.gameList[i].guestUserId2 = guestVO[i].member2UserId
            }
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
    .titleDistance {
        margin: 20px 0;
    }

    .host, .guest {
        padding: 20px 0;
    }

    .workman {
        text-align: right
    }

    .team-content {
      text-align: center;
      padding: 10px 0;
      cursor: pointer;
      &.active {
        background: url("/static/images/images/medit/active_wrap.png") no-repeat center top
      }
      &.disabled {
        cursor: not-allowed;
      }
    }

    .color-info {
      line-height: 100%;
      padding: 10px 0
    }

    .position {
      line-height: 35px
    }

    .btnWrapEdmit {
      text-align: center;
      margin-top: 50px;
      border-top: 1px solid #e5e5e5;
      padding: 20px 0;
    }

    .selector {
        width: 150px;
        float: left;
        .el-date-editor {
            width: 100%;
        }
    }

    .team-select {
      .el-select {
        width: 100%;
      }
    }

    .amap {
        width: 358px;
        height: 204px;
    }

    .el-vue-amap-container {
        height: 250px;
    }

    .amap-geolocation-con {
        z-index: 999;
    }

    .el-vue-search-box-container {
        z-index: 10000;
    }

    .lbl {
        width: 115px;
        text-align: right;
        line-height: 36px;
    }

    .add-area {
        margin-left: 16.66667%;
    }

    .add-person {
        width: 145px;
    }
   .amap{
     width: 358px;
     height: 204px;
    }
   .el-vue-amap-container{
     height: 250px;
    }
   .amap-geolocation-con{
     z-index: 999;
    }
  .el-vue-search-box-container{
    z-index: 10000;
  }
  .lbl{
    width:115px;
    text-align: right;
    line-height: 36px;
  }
  .add-area{
    margin-left: 16.66667%;
  }
  .add-person{
    width:145px;
  }
  .address-input{
    width: 350px;
  }
  .field-label{
    line-height:36px;
    p{
      text-align:right;
    }
  }
  .full-width{
    width:100%;
  }
  .versus{
    .vs {
      line-height: 36px;
    }
  }
  .player-set{
    border-top:1px solid #e5e5e5;
    margin-top: 30px;
    padding: 30px 0;
  }
  .mb20{
    margin-bottom: 20px;
  }
  .mr2{
    margin-right: 8.33333%;
  }
</style>
<style>
  .addposition.el-row .el-form-item__content {
      margin-left: 0px !important;
  }
</style>
